import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { DescItemDto } from '@/components/render-descriotion/Index'
import RenderDescription from '@/components/render-descriotion/Index'
import { UserOutlined } from '@ant-design/icons-vue'
import ToolTipText from '@/components/tooltip-text/Index'
import type { CompanyProductInfoDto, EleSignInfoDto, PayWageInfoDto } from '@/api/company/types'
@Component
export class BasicInfo extends Render {
    @Prop() eleSignInfo!: EleSignInfoDto

    @Emit('refresh')
    handleRefresh() {}

    get clientInfoData() {
        return [
            {
                label: '开通时间',
                value: this.eleSignInfo?.eleProductOpenTime
            },
            {
                label: '即将到期份数',
                value: this.eleSignInfo?.expectDueAmount
            },
            {
                label: '归属商务',
                value: (
                    <ToolTipText
                        text={this.eleSignInfo?.eleSaleName ?? ''}
                        content={this.eleSignInfo?.eleSalePhone ?? ''}
                    />
                )
            },
            {
                label: '剩余份数',
                value: this.eleSignInfo?.eleAmount
            },
            // {
            //     label: '超级管理员',
            //     value: <ToolTipText text={this.eleSignInfo?.superParentName ?? ''} content={this.eleSignInfo?.phone ?? ''} />,
            // },
            {
                label: '到期时间',
                value: this.eleSignInfo?.accountExpireTime
            },
            // {
            //     label: '收款渠道',
            //     value: this.eleSignInfo?.payAccountBalance
            // },
            {
                label: '合同操作人',
                value: this.eleSignInfo?.userName
            },
            {
                label: '操作人手机号',
                value: this.eleSignInfo?.phone
            },
            // {
            //     label: '收款帐户',
            //     value: this.eleSignInfo?.merchantBankCard
            // }
        ] as DescItemDto[]
    }

    render() {
        return (
            <div>
                <div class="flex items-center mb-20px">
                    <UserOutlined />
                    <div class="text-black-200 font-bold ml-8px">电子合同资料</div>
                </div>
                <RenderDescription labelWidth={140} renderData={this.clientInfoData} />
            </div>
        )
    }
}

export default toNative<
    { eleSignInfo: EleSignInfoDto; companyProductInfo: CompanyProductInfoDto },
    { refresh: () => void }
        >(BasicInfo)
